<script setup lang="ts">
import type { FontProps } from '@/types';

import {
  type ComponentInternalInstance,
  computed,
  getCurrentInstance,
  ref,
  watch,
} from 'vue';

import { useAppStore } from '@/store';

defineOptions({
  name: 'Font',
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore();
const FONT_PRESET: Array<FontProps> = proxy?.$config.setting
  .fonts as Array<FontProps>;
const defaultFont = computed(() => appStore.setting.font);
const modelValue = ref<string>(defaultFont.value || 'pingfang-sc');
function activeClass(font: string): string[] {
  return font === modelValue.value ? ['outline-box-active'] : [];
}
watch(
  () => modelValue.value,
  (val) => {
    appStore.updateSetting({ font: val });
  },
);
</script>
<template>
  <div class="content">
    <template v-for="font in FONT_PRESET" :key="font.name">
      <div class="flex cursor-pointer flex-col" @click="modelValue = font.name">
        <div
          :class="activeClass(font.name)"
          class="outline-box flex-center flex-col gap-3 px-3 py-4"
        >
          <ElText :class="`font-${font.name}`">文字123abcABC</ElText>
          <ElText :class="`font-${font.name}-bold`">文字123abcABC</ElText>
        </div>
        <div
          :class="`font-${font.name}`"
          class="text-muted-foreground mt-2 text-center text-xs"
        >
          {{ font.label }}
        </div>
      </div>
    </template>
  </div>
</template>
